<template>
  <div id="login">
    <el-card class="box-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>登 录</span>
        </div>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="80px"
        class="login-form"
      >
        <el-form-item label="Account" prop="userName">
          <el-input v-model="ruleForm.userName" />
        </el-form-item>
        <el-form-item label="Password" prop="password">
          <el-input @keyup.enter="submitForm()" v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <!-- <el-form-item label="Confirm" prop="checkPass">
          <el-input
            v-model="ruleForm.checkPass"
            type="password"
            autocomplete="off"
          />
        </el-form-item> -->
        <el-button id="submit-btn" type="primary" plain round @click="submitForm()">Submit</el-button>
        <!-- <el-form-item id="submit-btn-box"> -->
          
          <!-- <el-button @click="resetForm(ruleFormRef)">Reset</el-button> -->
        <!-- </el-form-item> -->
      </el-form>
      <el-divider />
      <span class="card-footer">
        <el-button class="button" text @click="$router.push({path:'/register'})">没有账号？</el-button>
        <el-button class="button" text @click="$router.push({path:'/forget'})">忘记密码？</el-button>
      </span>
    </el-card>
  </div>
</template>

<script>
import api from '../../api/data.js'
import { ElMessage } from 'element-plus'
export default {
  name: 'AppLogin',
  components: {

  },
  data () {
    let validateuserName = (rule, value, callback) => {
      const reg = /^[a-zA-Z0-9]{4,10}$/;
      if (value === '') {
        callback(new Error('请输入账号'))
      } else if (!reg.test(value)) {
        callback(new Error('账号必须为4-10位字母或数字组合'))
      } else {
        callback()
      }
    }
    let validatePass = (rule, value, callback) => {
      const reg = /^[a-zA-Z0-9]{4,12}$/;
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!reg.test(value)) {
        callback(new Error('密码必须为4-12位字母或数字组合'))
      } else {
        callback()
      }
    }
    // let validatePass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入密码'))
    //   } else {
    //     if (this.ruleForm.checkPass !== '') {
    //       this.$refs.ruleFormRef.validateField('checkPass')
    //     }
    //     callback()
    //   }
    // }
    // let validatePass2 = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请再次输入密码'))
    //   } else if (value !== this.ruleForm.pass) {
    //     callback(new Error('两次输入密码不一致!'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      ruleForm: {
        userName: '',
        password: ''
      },
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        userName: [
          { validator: validateuserName, trigger: 'blur' }
        ]
      }
  }},
  methods: {
    submitForm() {
      if (!this.$refs.ruleFormRef) return
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          api.login(
            this.ruleForm
          ).then((res) => {
            if (res.code < 300) {
              this.$store.commit('setUser', res.data)
              ElMessage({
                message: res.message,
                type: 'success',
              })
              let temp = setInterval(() => {
                this.$router.push({path:'/home'})
                clearInterval(temp)
              }, 1500)
            } else {
              ElMessage.error(res.message)
            }
          })
        } else {
          ElMessage.error('error submit!')
          return false;
        }
      });
    }
  },
  mounted () {
    if (this.$store.state.tokenError) {
      ElMessage.error('登录状态已过期，请重新登陆！')
      this.$store.commit('tokenErrorComplete')
    }
  }
}
</script>

<style scoped>
#login {
  width: 100%;
  height: 100%;
  background-image: url('../assets/cool-background.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  display: flex;
	justify-content: center;
	align-items: center;
}
#submit-btn {
  margin-top: 20px;
  margin-left: 70px;
  width: 320px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-family: 'PingFang SC';
  font-weight: 300;
  font-size: 24px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
  opacity: 0.8;
}
</style>
